<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="info-list"
      >
        <van-cell center title="添加管理员" icon="plus" @click="addData"/>
        <van-swipe-cell v-for="(item,index) in list" :key="index" stop-propagation :before-close="beforeClose" :name="index">
          <van-cell @click="editData(index)">
            <van-row type="flex" justify="space-between">
              <van-col span="16">
                <p style="font-size: 16px;font-weight: bold">{{item.name}}</p>
              </van-col>
            </van-row>
          </van-cell>
          <van-button
            slot="right"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </van-swipe-cell>
        <van-cell center title="退出登录" icon="exit" @click="exitLogin"/>

      </van-list>
    </van-pull-refresh>
    <!--添加弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="addShow"
      position="center"
    >

      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.name" label="用户名" placeholder="请输入用户名"/>
            <van-field v-model="form.password"  label="密码" placeholder="请输入密码"/>
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <van-button block @click="addShow=false">取消</van-button>
        </van-col>
        <van-col span="24">
          <van-button block @click="addDataConfirm">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <!--编辑弹窗-->
    <van-popup
      style="padding:.5rem;border-radius: 12px"
      v-model="editShow"
      position="center"
    >
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <!-- 输入任意文本 -->
          <van-cell-group>
            <van-field v-model="form.password"  label="新密码" placeholder="请输入新密码"/>
          </van-cell-group>
        </van-col>

      </van-row>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="24">
          <van-button block @click="editShow=false">取消</van-button>
        </van-col>
        <van-col span="24">
          <van-button block @click="editDataConfirm">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
  import {Notify,Dialog} from 'vant';

  export default {
    name: "Admin",
    data() {
      return {
        list: [],
        page: 0,
        form: {
          imgList: []
        },
        addShow: false,
        editShow: false,
        loading: false,
        finished: false,
        refreshing: false
      }
    },
    methods: {
      exitLogin(){
        this.$get("/adminuser/logout", {page: this.page}).then(res => {
          this.$store.commit("setLogin",null);
          this.$router.replace({path:'/yycadmin/login'})
        }).catch(function (err) {
          console.log(err);
        });
      },
      beforeClose({name,position, instance}) {
        let id=this.list[name].id;
        switch (position) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close();
            break;
          case 'right':
            Dialog.confirm({
              message: '确定删除吗？'
            }).then((res) => {
              console.log(res)
              this.$post("/adminuser/del", {ids: [id]}).then(res => {
                if (res.code == 1) {
                  Notify({type: 'danger', message: '删除失败' + res.msg});
                  return;
                }
                Notify({type: 'success', message: '删除成功'});
                this.onRefresh();
              }).catch(function (err) {
                console.log(err);
              });
              instance.close();
            }).catch((res)=>{
              instance.close();
            });
            break;
        }

      },
      onRefresh() {
        this.list = []
        this.page = 0;
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      onLoad() {
        this.getData()
      },
      getData() {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        this.page++
        this.loading = true;
        this.$get("/adminuser/list", {page: this.page}).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.finished = true;
            return;
          }

          this.loading = false;
          res.data.forEach((item) => {
            this.list.push(item);
          });

        }).catch(function (err) {
          console.log(err);
        });
      },
      addData() {
        this.form = {
          imgList: []
        }
        this.addShow = true;
      },
      addDataConfirm() {
        if (this.form.name == "" || this.form.name == undefined) {
          Notify({type: 'danger', message: '请输入用户名'});
          return;
        }
        if (this.form.password == "" || this.form.password == undefined) {
          Notify({type: 'danger', message: '请输入密码'});
          return;
        }

        this.$post("/adminuser/add", this.form).then(res => {
          if (res.code == 1) {
            Notify({type: 'danger', message: '添加失败，' + res.msg});
            return;
          }
          Notify({type: 'success', message: '添加成功'});
          this.onRefresh();
          this.addShow = false;
        })
      },
      editData(index) {
        this.editShow = true;
        this.form = this.list[index];
        this.form.password="";
      },
      editDataConfirm() {
        if (this.form.password == "" || this.form.password == undefined) {
          Notify({type: 'danger', message: '请输入新密码'});
          return;
        }
        this.$post("/adminuser/update", this.form).then(res => {
          if (res.code == 1) {
            Notify({type: 'danger', message: '修改失败，' + res.msg});
            return;
          }
          Notify({type: 'success', message: '修改成功'});
          this.onRefresh();
          this.editShow = false;
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .time-line-right {
    position: relative;
    flex-grow: 1;
    margin-bottom: .72rem;
    padding: 20px 0;
    background: #fff;
    border-radius: .24rem;
    .right-title {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1rem;
      text-overflow: ellipsis;
      i {
        display: inline-block;
        width: 2rem;
        height: 1rem;
        margin-right: .36rem;
        color: #fff;
        font-size: .72rem;
        font-style: normal;
        line-height: 1rem;
        text-align: center;
        background-color: #f74c31;
        border-radius: .12rem;
      }
    }
    .right-content {
      display: -webkit-box;
      margin-top: .04rem;
      overflow: hidden;
      color: #999;
      font-size: .72rem;
      line-height: 1rem;
      text-overflow: ellipsis;
      -webkit-line-clamp: 5;
    }
    .left-go {

      display: inline-block;
      left: .16rem;
      bottom: .12rem;
      margin-top: .08rem;
      color: #3243f7;
      font-size: .12rem;
      text-align: left;
    }
    .right-form {
      position: absolute;
      display: inline-block;
      right: .16rem;
      bottom: .12rem;
      margin-top: .04rem;
      color: #999;
      font-size: .12rem;
      text-align: right;
    }

  }

  .title {
    display: -webkit-box;
    margin-top: .04rem;
    overflow: hidden;
    color: #999;
    font-size: .72rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
  }

  .delete-button {
    height: 100%;
  }
</style>
